<template>
	<div class="detail">		
		<x-header :left-options="{backText: ''}" @on-click-back="isSideBarShow = false">{{title}}</x-header>
		<div class="flex tabbar">
			<router-link class="flex-item" :to="{path:'descript',query:{id}}">综述</router-link >
			<router-link class="flex-item" :to="{path:'config',query:{id}}">配置</router-link >
			<router-link class="flex-item" :to="{path:'picture',query:{id}}">图片</router-link >
			<router-link class="flex-item" :to="{path:'business',query:{id}}">经销商</router-link >
		</div>
		<div class="wrap">			
			<router-view></router-view>
		</div>
	</div>
</template>

<script>
	import { XHeader } from 'vux'
	export default {
		components:{
			XHeader
		},
		data () {
			return {
				id:'',
				title:'',
				compare_id:''
			}
		},
		mounted() {
			this.id = this.$route.query.id;
			this.compare_id = this.$route.query.compare_id;
		}
	}
</script>

<style lang = 'scss' scoped>
	.tabbar {
		text-align: center;
		height: 1.17333rem;
		line-height: 1.17333rem;
		.router-link-active {
			border-bottom: 2px solid #0090ff;
		}
	}
	.wrap {
		border-top: 2px solid #f5f5f5;
		margin-top: -2px;
	}
</style>